<template>
  <view class="mine">
    <view class="touxiang">
      <image v-if="info" :src="info?.avatarUrl"></image>
      <image v-else src="../../static/照相机.png"></image>
    </view>
    <view class="nickname">
      <text v-if="info">{{ info?.nickName }}</text>
      <button v-else @click="goLogin">立即登录</button>
    </view>
    <view class="nav1">
      <view class="nav1-item">
        <p>5</p>
        <p>健康分</p>
      </view>
      <view class="nav1-item">
        <p>5</p>
        <p>优惠券</p>
      </view>
      <view class="nav1-item">
        <p>8</p>
        <p>信息</p>
      </view>
    </view>
    <view class="nav2">
      <view class="nav1-item" @click="goDetail(index)" v-for="(item, index) in nav2" :key="index">
        <image :src="item.image"></image>
        <p>{{ item.text }}</p>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
const info = ref();
onShow(() => {
  const token = uni.getStorageSync("token");
  if (token) {
    const info1 = uni.getStorageSync("userInfo");
    info.value = info1;
  }
});
const nav2 = ref([
  {
    image: "../../static/mine/jiuzhenren.svg",
    text: "就诊人信息",
  },
  {
    image: "../../static/mine/guahao.svg",
    text: "我的挂号",
  },
  {
    image: "../../static/mine/xinguanyimiao.svg",
    text: "新冠疫苗",
  },
  {
    image: "../../static/mine/hpvyimiao.svg",
    text: "hpv疫苗",
  },
  {
    image: "../../static/mine/hesuan.svg",
    text: "核酸检测",
  },
  {
    image: "../../static/mine/tijianbaogao.svg",
    text: "我的体检",
  },
]);
const goLogin = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};
const goDetail = (index: number) => {
    const token = uni.getStorageSync("token");
    if(token){
        switch(index){
            case 0:
            uni.navigateTo({
                url:"/navPage/jiuzhenren/jiuzhenren"
            })
            break;
            case 1:
            uni.navigateTo({
                url:"/navPage/guahao/guahao"
            })
            break;
            case 2:
            uni.navigateTo({
                url:"/navPage/SubscribeList/SubscribeList"
            })
            break;
            case 3:
            uni.navigateTo({
                url:"/navPage/hpvList/hpvList"
            })
            break;
            case 4:
            uni.navigateTo({
                url:"/navPage/nucList/nucList"
            })
            break;
            case 5:
            uni.navigateTo({
                url:"/navPage/tijianList/tijianList"
            })
            break;
        }
    }else{
      goLogin()
    }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100vw;
  height: 100vh;
  background-color: #e7f0fb;
  // overflow: hidden;
  overflow: hidden;
  .touxiang {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40rpx 0 20rpx 0;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
  }
  .nickname {
    text-align: center;
    button {
      width: 250rpx;
      background-color: blue;
      color: #fff;
    }
  }
  .nav1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 0 40rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
  }
  .nav2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 20rpx 0;
    .nav1-item {
      width: 25%;
      text-align: center;
      margin: 10rpx 0;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
}
</style>
